<template>
  <div id="app" class="search-content">
    <div class="address">
      南京
      <icons iconName="icon-jiantouxia" />
    </div>
    <form class="form-search" action="javascript:true;" autocomplete="off">
      <span class="iconfont icon-sousuo"></span>
      <input
        class="inp-search"
        type="search"
        v-model="val"
        @keyup="keyupSearchInput"
        ref="searchInput"
        placeholder="请输入公寓名称"
      />
    </form>
  </div>
</template>


<script>
import icons from "@/components/icon/index";
export default {
  name: "search",
  components: {
    icons,
  },
  data() {
    return {
      val: "",

      iconName: "&#xe61a;",
    };
  },
  created() {},
  methods: {
    keyupSearchInput(e) {
      // 搜索回车键
      if (e.keyCode == 13) {
        this.$emit("show",this.$refs.searchInput.value)
        //this.store.action.toggleSuggestion(false);
        // 人为失焦
        this.$refs.searchInput.blur();
      }
    },
  },
};
</script>

<style lang="less">
.search-content {
  position: fixed;
  top: 0;
  z-index: 101;
  width: calc(100% - 4vw);
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 2vw;
  .address {
    font-size: 4vw;
    display: flex;
    align-items: center;
    .content {
      padding-left: 1vw;
      .iconfont {
        font-size: 3vw;
      }
    }

    padding-right: 2vw;
  }

  .form-search {
    width: auto;
    flex: 1;
    position: relative;

    .inp-search {
      width: 100%;
      height: 9vw;
      border: #ffffff;
      background-color: #f6f8fa;
      border-radius: 2vw;
      font-size: 4vw;
      padding: 0 9vw;
    }

    .inp-search::-webkit-input-placeholder {
      color: #dadcde;
    }
    // 清除谷歌浏览器下的 search 叉号
    .inp-search::-webkit-search-cancel-button {
      display: none;
    }
    /*去掉IE11的叉叉*/
    .inp-search::-ms-clear {
      display: none;
    }

    .icon-sousuo {
      position: absolute;
      top: 2.2vw;
      font-size: 4vw;
      left: 3vw;
      color: #dadcde;
    }
  }
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
